<template>
  <div class="w-pages-wrapper">
    <div style="display:flex;position:relative">
      <div class="card-time" style="line-height:40px">首页</div>
      <div style="height:40px;position:absolute;right:620px">
        <el-form label-width="100px" inline>
          <el-form-item label="机构">
            <el-cascader
              v-model="jigoushu"
              :options="jigoushuOptions"
              :props="{expandTrigger:'click',emitPath:false,label:'nodeName',value:'nodeId',children:'childrens'}"
              :show-all-levels="false"
              :filterable="true"
              :clearable="false"
              collapse-tags
              @change="treeChange"
              class="cascader-hidden"
            ></el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <div style="height:40px;position:absolute;right:320px">
        <el-form label-width="100px" inline>
          <el-form-item label="时间">
            <el-select v-model="value" @change="changeTime">
              <el-option
                v-for="item in datetime"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div style="height:40px;position:absolute;right:0px">
        <el-form label-width="100px" inline>
          <el-form-item label="数据日期">
            <el-date-picker
              v-model="time"
              type="date"
              placeholder="请选择日期"
              :clearable="true"
              value-format="yyyy-MM-dd"
              @change="changDate"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <IntegratedKanban :data="IntegratedKanbanDate" :period="value" :chooseTime="time" />
    <div class="header-title" style="margin-top:28px;display:inline-block">重点项目</div>
    <div class="lookMore" @click="lookMore">查看更多</div>
    <keyProjects :data="keyProjectsDate"></keyProjects>
    <arrowTab :tabList="tabList" :key="arrowKey" :activeNameF="activeName" @tabChange="tabChange">
      <!-- <template slot="generalProfile">
        <generalProfile
          ref="generalProfile"
          :param="time"
          :isTimeChange="isTimeChange"
          :periodType="value"
        />
      </template> -->
      <template slot="trendSituation">
        <trendSummary
          ref="trendSummary"
          :param="time"
          :isTimeChange="isTimeChange"
          :periodType="value"
        />
      </template>
      <template slot="center">
        <center
          ref="center"
          :isTimeChange="isTimeChange"
          :periodType="value"
          :jigoushu="jigoushu"
        />
      </template>
      <template slot="resourceSituation">
        <resourceSituation
          ref="resourceSituation"
          :isTimeChange="isTimeChange"
          :periodType="value"
          :jigoushu="jigoushu"
        />
      </template>
      <template slot="storyCoordination">
        <storyCoordination ref="storyCoordination" :param="time" />
      </template>
      <template slot="resource">
        <resource
          ref="resource"
          :isTimeChange="isTimeChange"
          :periodType="value"
          :jigoushu="jigoushu"
        />
      </template>
    </arrowTab>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import {
  IntegratedKanban,
  keyProjects,
  generalProfile,
  trendSummary,
  center,
  resourceSituation,
  storyCoordination,
  resource
} from "./components";
import arrowTab from "@/layout/globalView/arrowbox.vue";
import { getInfo } from "@/api/user";
export default {
  name: "Dashboard",
  components: {
    IntegratedKanban,
    keyProjects,
    generalProfile,
    trendSummary,
    center,
    resourceSituation,
    storyCoordination,
    resource,
    arrowTab,
  },
  data() {
    return {
      IntegratedKanbanDate: null,
      keyProjectsDate: null,
      time: "",
      value: "curmth",
      jigoushu: "",
      jigoushuOptions: [],
      datetime: [
        { label: "本月", value: "curmth" },
        { label: "本季", value: "curquar" },
        { label: "半年", value: "halfyr" },
        { label: "本年", value: "curyr" },
      ],
      isTimeChange: "",
      tabList: [
        // { name: "中心概况", value: "generalProfile" },
        { name: "中心概况", value: "center" },
        { name: "趋势概况", value: "trendSituation" },
        { name: "资源看板", value: "resourceSituation" },
        { name: "故事配合概况", value: "storyCoordination" },
        { name: "资源概况", value: "resource" },
      ],
      activeName: "中心概况",
      arrowKey: 0,
    };
  },

  methods: {
    filterChild(treeData) {
      if (!treeData) return;
      treeData.map((item) => {
        if (item.childrens && item.childrens.length == 0) {
          item.childrens = null;
          return;
        }
        this.filterChild(item.childrens);
      });
    },
    treeChange(v) {
      this.arrowKey = this.arrowKey + 1;
      this.jigoushu = v;
    },
    tabChange(tab) {
      this.activeName = tab;
    },
    changeTime(val) {
      this.arrowKey = this.arrowKey + 1;
      let obj = { period: this.value, viewDate: this.time };
      //   getInDate(obj).then((res)=>{
      //       this.IntegratedKanbanDate=res.data
      //   })
    },
    changDate(v) {
      this.isTimeChange = this.time;
      this.arrowKey = this.arrowKey + 1;
      let param = { period: this.value, viewDate: v };
      if (v == null) {
        // GetViewDate().then((res) => {
        //   this.time = res.data;
        // });
      } else {
        //   getInDate(obj).then((res)=>{
        //       this.IntegratedKanbanDate=res.data
        //   })
        //  getInDate1(obj).then((res)=>{
        //       this.keyProjectsDate=res.data
        //   })
      }
    },
    lookMore() {
      this.$router.push({
        name: "more",
        params: this.keyProjectsDate,
      });
    },
    // lookMore() {
    //   this.$router.push({
    //     name: "more",
    //     params:{jigouTree:this.jigoushu[1]},//路由传参
    //   });
    // },
  },
  async mounted() {
    // let org= await fff({filter:""})
    // this.jigoushuOptions=org.data?org.data:[]
    // this.filterChild(this.jigoushuOptions)
    // let time = await GetViewDate();
    // let time = time.data;
    // let res=await getIndata({viewDate:this.time,period:this.value})
    // this.IntegratedKanbanDate=res.data
  },
};
</script>
<style lang="sass" scoped>
@import "./index.scss"
</style>